<template>
  <div class="centerBox">
    <el-page-header @back="goBack" content="个人中心">
    </el-page-header>
    <hr>
    <ul class="leftManu">
      <li><router-link class="list-group-item" active-class="active" to="/personCenter/personInfo">我的资料</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/personCenter/getAddress">收货地址</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/personCenter/myCollection">我的收藏</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/personCenter/editPassword">修改密码</router-link></li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonCenter",
  data(){
    return {

    };
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.centerBox{
  width: 1244px;
  height: 700px;
  /*border: solid 1px red;*/
  margin: 1em auto;
  position: relative;
}
.leftManu{
  width: 165px;
  height: 1100px;
  border-right: solid 1px lightgray;
  position: absolute;
  left: 3em;
  top: 3em;
  padding-right: 7em;
}
.leftManu li{
  width: 155px;
  height: 41px;
  border:solid 1px lightgray;
  text-align: center;
  line-height: 41px;
  margin-bottom: 1em;
}
.leftManu li a:hover{
  color: lightcoral;
  text-decoration: underline;
}

</style>